<template>
  <center>
    <div><mallki style="margin-top: 50px;color: #ff8780" class-name="mallki-text" text="若兮音乐"/></div>
    <div style="width: 1000px;margin-top: 50px">
      <!--music：当前播放的音乐。 list：播放列表 ：showlrc：是否显示歌词-->
      <aplayer :music="audio[0]" :list="audio"  :showlrc="true"></aplayer>
    </div>
  </center>
</template>

<script>
	import aplayer from 'vue-aplayer'
	import Mallki from '@/components/TextHoverEffect/Mallki'
	export default {
		name: 'click',
		components: { aplayer,Mallki },
		data () {
			return {
				// 音频列表
				audio: [
					{
						title: '天空之城',
						artist: '黄叶',
						url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E.m4a',
						pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg',
						lrc: '[00:00.00] (,,•́ . •̀,,) 刚刚开始学钢琴弹的hhhh'
					},
					{
						title: '蒲空英的约定',
						artist: '黄叶',
						url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a',
						pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg',
						lrc: '[00:00.00] (,,•́ . •̀,,) 刚刚开始学钢琴弹的hhhh'
					},
					{
						title: '无畏',
						artist: '马頔',
						url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E9%A9%AC%E9%A0%94%20-%20%E6%97%A0%E7%95%8F.flac',
						pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E4%BB%A5%E5%AE%B6%E4%B9%8B%E5%90%8D.jpg', // prettier-ignore
						lrc: '[00:00.00] (,,•́ . •̀,,) 抱歉，当前歌曲暂无歌词'
					},
					{
						title: '白纸',
						artist: '蓝乐',
						url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%93%9D%E4%B9%90%20-%20%E7%99%BD%E7%BA%B8.flac',
						pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/-1992181439.jpg',
						lrc: '[00:00.00] (,,•́ . •̀,,) 抱歉，当前歌曲暂无歌词'
					}
				]
			}
		}
	}
</script>

<style scoped>

</style>
